import React from 'react'
import {useLocation,useParams,useNavigate} from "react-router-dom"
import { CartO, ChatO, ShopO } from '@react-vant/icons'

import { ProductCard ,NavBar,ActionBar } from 'react-vant';
import {useDispatch,useSelector} from "react-redux"
import {add_shopcar_data} from "../api/index"
type Props = {}

const Deils = (props: Props) => {
  const Location:any=useLocation()
  const Params=useParams()
  const Navigate=useNavigate()
  const dispatch=useDispatch()
  const gotoShocar=()=>{
    Navigate("/shopcar")
  }
  const gotoshopcar=(id:string)=>{
    // console.log(id);
    dispatch(add_shopcar_data(id))
  }
  return (
    <div>
         <NavBar
      title="DEILS"
      leftText="返回"
      rightText="按钮"
      onClickLeft={() => Navigate(-1)}
    />
        <ProductCard
      num={Location.state.num}
      price={Location.state.price}
      desc={Location.state.info}
      title={Location.state.title}
      thumb={Location.state.img}
    />
     <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => gotoshopcar(Location.state.id)}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='立即购买'
          onClick={() => gotoShocar()}
        />
      </ActionBar>
    </div>
  )
}

export default Deils